<!-- https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions -->

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const msg = ref('消息')

const rawHtml = ref('<span style="color: red">This should be red.</span>')

const isButtonDisabled = ref(true)

const objectOfAttrs = {
    id: 'container',
    class: 'wrapper'
}

const number = 0

const attributeName = 'href'

const eventName = 'focus'

</script>

<template>
    <!-- 文本插值  -->
    <span>Message: {{ msg }}</span>

    <!--  v-html 指令，将此元素的 innerHTML 与 rawHtml 属性保持同步 -->
    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    <!-- v-bind 指令，将元素的 id 与组件的 dynamicId 属性保持一致 -->
    <div v-bind:id="dynamicId"></div>
    <!-- 简写语法 -->
    <div :id="dynamicId"></div>

    <!-- 当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。 -->
    <button :disabled="isButtonDisabled">Button</button>

    <!-- 动态绑定多个值 -->
    <div v-bind="objectOfAttrs"></div>

    <!-- 使用 JavaScript 表达式 -->
    <span>{{ number + 1 }}</span>
    <span>{{ ok ? 'YES' : 'NO' }}</span>
    <div :id="`list-${number}`"></div>

    <!-- 调用函数：可以在绑定的表达式中使用一个组件暴露的方法 -->

    <!-- 受限的全局访问 -->

    <!-- 指令 Directives,v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素 -->
    <p v-if="seen">Now you see me</p>

    <!-- 简写 -->
    <a v-bind:href="url"> ... </a>
    <a :href="url"> ... </a>

    <!-- 简写 -->
    <a v-on:click="doSomething"> ... </a>
    <a @click="doSomething"> ... </a>

    <!-- 在指令参数上也可以使用一个 JavaScript 表达式 -->
    <!--注意，参数表达式有一些约束，参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释 -->
    <a v-bind:[attributeName]="url"> ... </a>

    <!-- 简写 -->
    <a :[attributeName]="url"> ... </a>


    <a v-on:[eventName]="doSomething"> ... </a>

    <!-- 简写 -->
    <a @[eventName]="doSomething">...</a>

    <!-- 修饰符 Modifiers -->


</template>